import React, { useEffect, useState } from 'react'
import { Avatar, Button, Col, Row, Space, Tooltip } from 'antd'
import { LogoutOutlined, SwapOutlined } from '@ant-design/icons'
import { createHashHistory } from 'history'

import { inject, observer } from 'mobx-react'

import { CheckLanguage } from '../../../util/function'
import HomeStore from '../../../stores/HomeStory'

interface UserDetailProps {
  collapsed?: boolean
  rowSpan?: number
  Url?: string
  HomeStore: HomeStore
}

const UserDetail: React.FC<UserDetailProps> = (props: UserDetailProps) => {
  const { collapsed, rowSpan, HomeStore } = props
  const [user] = useState({
    username: localStorage.getItem('username'),
    avatar: localStorage.getItem('avatar'),
  })

  useEffect(() => {}, [])

  return (
    <div className='logo'>
      <Tooltip
        placement='bottom'
        trigger='click'
        title={
          <Space direction='vertical'>
            <Button
              type='primary'
              style={{ width: '100%', textAlign: 'left' }}
              onClick={() => {
                localStorage.clear()
                createHashHistory().push('/login')
              }}
            >
              <LogoutOutlined />
              {CheckLanguage('logout', HomeStore.language)}
            </Button>

            <Button
              type='primary'
              onClick={HomeStore.changeLanguage}
              style={{ width: '100%', textAlign: 'left' }}
            >
              {CheckLanguage('chinese', HomeStore.language)}
              <SwapOutlined />
              {CheckLanguage('english', HomeStore.language)}
            </Button>
          </Space>
        }
      >
        <Row align='bottom' className='row'>
          <Col span={rowSpan} className='col'>
            <Avatar src={user.avatar} />
          </Col>
          {collapsed ? null : (
            <Col span={rowSpan} className='col'>
              {user.username}
            </Col>
          )}
          <Col span={rowSpan} className='col'>
            <LogoutOutlined />
          </Col>
        </Row>
      </Tooltip>
    </div>
  )
}

export default inject('HomeStore')(observer(UserDetail))
